<template>
  <div class="header">
    <div class="slogan">
      <p>Plata ye pupu dada!</p>
    </div>
    <div class="nav">
      <ul class="left-part">
        <li class="ele">
          <span @click="goPage('/')" :class="{ active: url_path === '/' }">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-home" />
            </svg>
          </span>
        </li>
        <li class="ele">
          <span
            @click="goPage('/share')"
            :class="{ active: url_path === '/share' }"
          >
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-peixun" />
            </svg>
          </span>
        </li>
        <li class="ele">
          <span @click="openhtml()">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-library" />
            </svg>
          </span>
        </li>
        <li class="ele">
          <span
            @click="gocache('/unknown')"
            :class="{ active: url_path === '/unknown' }"
          >
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dengdai" />
            </svg>
          </span>
        </li>
      </ul>

      <div class="right-part">
        <div v-if="token">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <div class="block">
                <el-avatar
                  shape="square"
                  :size="50"
                  :src="ico"
                  :fit="fit"
                ></el-avatar>
              </div>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-s-custom"
                >个人中心</el-dropdown-item
              >
              <el-dropdown-item
                icon="el-icon-switch-button"
                @click.native="logout"
                >注销</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div v-else>
          <span @click="pull_login" class="login">登录</span>
          <span class="line">|</span>
          <span class="login">注销</span>
        </div>
      </div>
      <!-- 接收login的click引用并执行方法 -->
      <Login
        v-if="is_login"
        @close="close_login"
        @go="pull_register"
        @success="login_success"
        @change="pull_change"
      />
      <Register
        v-if="is_register"
        @close="close_register"
        @success="register_success"
      />
      <Change
        v-if="is_change"
        @close="close_change"
        @success="change_success"
      />
    </div>
  </div>
</template>

<script>
import Login from "./Login";
import Register from "./Register";
import Change from "./Change";
import Avatar from "vue-avatar";

export default {
  inject: ["reload"],
  name: "Header",
  components: {
    Login,
    Register,
    Change,
    Avatar,
  },
  data() {
    return {
      // 根路由
      url_path: sessionStorage.url_path || "/",
      is_login: false,
      is_register: false,
      is_change: false,
      token: $cookies.get("token") || "",
      username: $cookies.get("username") || "",
      ico: $cookies.get("ico") || "",
      fit: "fill",
      html: "http://127.0.0.1:8081 ",
    };
  },
  methods: {
    goPage(url_path) {
      // 已经是当前路由就没有必要重新跳转
      if (this.url_path !== url_path) {
        // 跳转到当前路由
        this.$router.push(url_path);
        // window.location = url_path;
      }
      // 修改数据库中的路由,数据库中的路由默认为根路由
      sessionStorage.url_path = url_path;
    },
    gocache(url_path) {
      // 已经是当前路由就没有必要重新跳转
      if (this.url_path !== url_path) {
        // 跳转到当前路由
        this.$router.push(url_path);
      }
      // 修改数据库中的路由,数据库中的路由默认为根路由
      sessionStorage.url_path = url_path;
    },
    openhtml() {
      this.html = this.html
        .replace("http://127.0.0.1:8081", this.$settings.base_url)
        .replace("8000", "8081");
      window.open(this.html);
    },
    pull_login() {
      this.is_login = true;
      this.is_register = false;
    },
    pull_register() {
      this.is_login = false;
      this.is_register = true;
    },
    pull_change() {
      this.is_login = false;
      this.is_change = true;
    },
    close_register() {
      this.is_register = false;
    },
    close_login() {
      this.is_login = false;
    },
    close_change() {
      this.is_change = false;
    },
    login_success() {
      this.close_login();
      // 页面获取cookie
      this.token = this.$cookies.get("token");
      this.username = this.$cookies.get("username");
      this.ico = this.$cookies.get("ico");
      this.reload();
    },
    logout() {
      this.token = this.$cookies.remove("token");
      this.username = this.$cookies.remove("username");
      this.ico = this.$cookies.remove("ico");
      // 注销时赋予空值
      this.token = "";
      this.username = "";
      this.ico = "";
      this.reload();
    },
    register_success() {
      this.pull_login();
    },
    change_success() {
      this.is_change = false;
      this.is_login = true;
    },
  },
  // 当头部重新加载的时候就会走create钩子,sessionStorage.url_path即加载的网页
  // 根据当前的路更新数据库中的路由，已经更新当前的路由指向，保证每次输入页面的时候能跳转页面并重新加载
  created() {
    sessionStorage.url_path = this.$route.path;
    this.url_path = this.$route.path;
  },
};
</script>

<style scoped>
.header {
  background-color: white;
  box-shadow: 0 0 5px 0 #aaa;
}

.header:after {
  content: "";
  display: block;
  clear: both;
}

.slogan {
  background-color: #eee;
  height: 40px;
}

.slogan p {
  width: 600px;
  margin: 0 auto;
  color: #aaa;
  font-size: 13px;
  line-height: 40px;
  text-align: center;
  font: 15px/36px "微软雅黑";
}

.nav {
  background-color: white;
  user-select: none;
  width: 1200px;
  margin: 0 auto;
}

.nav ul {
  padding: 15px 0;
  float: left;
}

.nav ul:after {
  clear: both;
  content: "";
  display: block;
}

.nav ul li {
  float: left;
}

.ele {
  margin: 0 20px;
}

.ele span {
  display: block;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  padding-bottom: 5px;
}

.ele span:hover {
  border-bottom-color: orange;
}

.ele span.active {
  color: orange;
  border-bottom-color: orange;
}

.right-part {
  margin-top: 20px;
  float: right;
}

.right-part .line {
  margin: 0 10px;
}

.right-part .login:hover {
  cursor: pointer;
  font: "微软雅黑";
  color: orange;
}
.right-part span {
  font: 18px large;
  cursor: pointer;
  font-family: "Microsoft YaHei";
}

.search {
  float: right;
  position: relative;
  margin-top: 22px;
}

.search input,
.search button {
  border: none;
  outline: none;
  background-color: white;
}

.search input {
  border-bottom: 1px solid black;
}

.search input:focus {
  border-bottom-color: orange;
}

.search input:focus + button {
  color: orange;
}

.search .tips {
  position: absolute;
  bottom: 3px;
  left: 0;
}

.search .tips span {
  border-radius: 11px;
  background-color: #eee;
  line-height: 22px;
  display: inline-block;
  padding: 0 3px;
  margin-right: 3px;
  cursor: pointer;
  color: #666;
  font-size: 14px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-dropdown-link span {
  margin: -3px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
.el-dropdown-menu__item {
  font-family: "微软雅黑";
}
.icon {
  font-size: 35px;
}
</style>
